import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

let scene = new THREE.Scene();
/**
 * 除了使用 BufferGeometry 来构建几何体外，我们还可以是用 Geometry 类型直接创建几何体
 * Geometry 本质与 BufferGeometry 相同，threejs 在渲染时会将 Geometry 转换成 BufferGeometry 再做处理
 */
let geometry = new THREE.Geometry(); // 声明一个 Geometry 几何体对象

/**
 * Vector3 类型表示一个三维向量，可用来定义顶点实例
 */
let p1 = new THREE.Vector3(0, 0, 0);
let p2 = new THREE.Vector3(50, 0, 0);
let p3 = new THREE.Vector3(0, 100, 0);

let p4 = new THREE.Vector3(0, 0, 100);

// 将顶点添加到几何对象中
// Geometry.vertices 与 BufferGeometry.attributes.position 对应
geometry.vertices.push(p1, p2, p3, p4);

/**
 * Color 类型表示一个 16 进制的颜色值
 */
let c1 = new THREE.Color(0xff0000);
let c2 = new THREE.Color(0x00ff00);
let c3 = new THREE.Color(0x0000ff);

let c4 = new THREE.Color(0xff00ff);

// 将颜色值添加到几何对象中
geometry.colors.push(c1, c2, c3, c4);
// Geometry.colors 对 Mesh 网格对象时无效的，但对 Points 和 Line 实例都有效

/**
 * Face3 构造函数创建一个三角面
 * Face3 的构造参数，与 BufferGeometry.index 一样，是顶点数据的“索引”，而不是顶点数据本身
 */
let face1 = new THREE.Face3(0, 1, 2);
let face2 = new THREE.Face3(0, 1, 3);
// 设置三角面各顶点的法向量
// 创建 face1 的顶点法向量
let n1 = new THREE.Vector3(0, 0, 1);
let n2 = new THREE.Vector3(0, 0, 1);
let n3 = new THREE.Vector3(0, 0, 1);
face1.vertexNormals.push(n1, n2, n3);
// 创建并设置 face2 的法向量
face2.normal = new THREE.Vector3(0, -1, 0);
// 设置三角面三个顶点的颜色，即三角面颜色
face1.color = new THREE.Color(0xff00ff);
face2.color = new THREE.Color(0xffff00);
// 将三角面添加到几何体中
geometry.faces.push(face1, face2);

let meshMat = new THREE.MeshLambertMaterial({
  vertexColors: THREE.VertexColors,
  side: THREE.DoubleSide
});
let mesh = new THREE.Mesh(geometry, meshMat);
scene.add(mesh);

// let pointMat = new THREE.PointsMaterial({
//   vertexColors: THREE.VertexColors,
//   size: 10
// });
// let points = new THREE.Points(geometry, pointMat);
// scene.add(points);

// let lineMat = new THREE.LineDashedMaterial({
//   vertexColors: THREE.VertexColors,
//   linewidth: 2
// });
// let lines = new THREE.Line(geometry, lineMat);
// scene.add(lines);

// 环境光
let ambientL = new THREE.AmbientLight(0x444444);
scene.add(ambientL);
// 点光源
let pointL = new THREE.PointLight(0xffffff);
pointL.position.set(0, 50, 200);
scene.add(pointL);

let axesH = new THREE.AxesHelper(200);
scene.add(axesH);

let k = innerWidth / innerHeight,
    s = 200,
    camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(400, 400, 400);
camera.lookAt(scene.position);

let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0xeeeeee);
document.body.appendChild(renderer.domElement);

new OrbitControls(camera, renderer.domElement);

function render () {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();